import React, { Component } from 'react'
import { connect } from 'dva'
import { Radio } from 'antd'

import styled from 'styled-components';
import echarts from 'echarts';

import styles from './style.css';

const MySpan = styled.span`
	display: inline-block;
	height: 13;
	line-height: 8px;
	margin-left: ${props => props.left || 0};
	color:rgba(0,0,0,0.85);
	font-weight: 400;
	font-size: 15;
`;

const MyCircleBox = styled.div`
	width: 10px;
	height: 10px;
	background: ${(props) => props.color};
	border-radius: 50%;
`;

@connect(({ analyse_alarm }) => ({
  alarmDistribution: analyse_alarm.alarmDistribution || {}
}))
export default class TimeDistribution extends Component<any, any> {
  readonly state = {
    mode: 2,
  }
  handleChange = (e) => {
    const mode = e.target.value;
    this.setState(() => ({ mode }), () => {
      this.queryData(mode)
    });
  }

  queryData = mode => {
    const { dispatch } = this.props;
    dispatch({ type: 'analyse_alarm/queryAlarmDistribution', payload: { type: mode } }).then(() => {
      const { list = [] } = this.props.alarmDistribution
      const data = list && Array.isArray(list) && list.map(item => (item.total))
      const max = Math.max(...data)
      const indicator = list && Array.isArray(list) && list.map((item, ind) => {
        let pre = item.time.split(':')[0]
        return {
          name: `${pre}-${(+pre + 4) < 9 ? `0${(+pre + 4)}` : (+pre + 4)}(时)`,
          max
        }
      }).reverse();
      
      if (this.refs.distribution) {
        let distributionChart = echarts.init(this.refs.distribution);
        let option = {
          grid: {
            left: 10,
            top: 10,
            bottom: 10,
            right: 10
          },
          backgroundColor: '#fff',
          color: ['rgba(0,0,0,0)'],
          tooltip: {
            trigger: 'item',
          },
          radar: {
            name: {
              textStyle: {
                color: '#0880df',
                fontSize: 14,
              }
            },
            splitLine: {
              lineStyle: {
                color: [
                  '#0880DF'
                ].reverse()
              }
            },
            splitArea: {
              areaStyle: {
                color: [
                  'rgba(169, 211, 243, 0.1)', 'rgba(169, 211, 243, 0.2)',
                  'rgba(169, 211, 243, 0.4)', 'rgba(169, 211, 243, 0.6)',
                  'rgba(169, 211, 243, 0.8)', 'rgba(169, 211, 243, 1)'
                ].reverse()
              }
            },
            axisLine: {
              lineStyle: {
                color: '#0880DF'
              }
            },
            triggerEvent: true,
            indicator,
            radius: '70%'
          },
          series: [{
            center: ['30%', '50%'],
            lineStyle: {
              normal: {
                color: '#FB8E32',
                opacity: 0.6
              }
            },
            itemStyle: {
              normal: {
                color: '#FB8E32',
              }
            },
            type: 'radar',
            name: '指数情况',
            areaStyle: {
              normal: {
                color: '#FB8E32',
                opacity: 0.3
              }
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#FB8E32',
                  fontSize: 12,
                }
              }
            },
            data: [
              { value: data }
            ],
          }]
        };
        distributionChart.setOption(option)
      }
    }

    )
  }


  componentDidMount() {
    this.queryData(2)
  }
  render() {
    return (
      <>
        <div ref='distribution' style={{ width: '90%', height: '90%', top: 20 }}></div>
        <div style={{ position: 'absolute', right: 77, top: 113, display: 'flex' }}>
          <MyCircleBox color='#FB8E32'></MyCircleBox>
          <MySpan left='10px'>时段内的报警数量</MySpan>
        </div>
        <div style={{ position: 'absolute', top: 62, right: 30 }}>
          <Radio.Group className={styles.radioGroup} buttonStyle="solid" onChange={this.handleChange} value={this.state.mode}>
            <Radio.Button value={1}>本周</Radio.Button>
            <Radio.Button value={2}>本月</Radio.Button>
            <Radio.Button value={3}>全年</Radio.Button>
          </Radio.Group>
        </div>
      </>
    )
  }
}
